<template>
	<view class="main">
		<view class="info">
			<view class="xflex-x xmb40">
				<image class="info-sj" src="/static/image/mine/sj.png"></image>
				<view class="info-state">
					待入住
				</view>
			</view>

			<view class="info-time">
				{{info.data?.order_info?.time}}
				{{info.data?.order_info?.night}}晚
			</view>

			<view class="xflex-x">
				<view class="info-name xmt20 xmb10" v-for="(items,indexs) in info.data?.items" :key="indexs">
					{{items.house_name}}
				</view>
			</view>
			<view class="xflex-x xmt10">
				<view class="info-type xpr40">
					{{info.data?.order_info?.adult}}成人
				</view>
				<view class="info-type xpl24">
					{{info.data?.order_info?.children}}儿童
				</view>
			</view>


			<view class="order-user xmt32">
				<view class="xflex-x">
					<view class="order-user-vip xflex-x">
						<image class="order-user-vipIcon xml10" :src="info.data.user.level.icon" mode=""></image>
						<view class="order-user-vipText xml10">
							{{info.data.user.level.name}}
						</view>
					</view>
					<view class="">

					</view>
				</view>

				<view class="xflex-x-between">
					<view class="">
						<view class="order-user-in">
							姓名：<text>{{info.data.realname}}</text>
						</view>
						<view class="order-user-in">
							联系方式：<text>{{info.data.hide_mobile}}</text>
						</view>
					</view>
					<view class="xflex-y-center"   @click="onPhone(info.data.hide_mobile)">
						<image class="order-user-customer" src="/pagesA/static/images/dianhua.png" mode=""></image>
						<view class="order-user-customert">
							联系客户
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="hotel xbgf xmt20">
			<view class="xflex-x">
				<view class="hotel-h">

				</view>
				<view class="hotel-title">
					参与盲盒房间
				</view>
			</view>

			<view class="xflex-x xmt24"  v-for="(items,indexs) in info.data?.items" :key="indexs">
				<image class="hotel-img" :src="items.image" mode=""></image>
				<view class="hotel-box xflex-y-between xflex1 xai">
					<view class="">
						<view class="hotel-title">
							{{items.house_name}}
						</view>
						<view class="xflex-x xmt12">
							<view class="hotel-span xmr10" v-for="(itr,indx) in items.labels">
								{{itr}}
							</view>
						</view>
					</view>
					<view class="hotel-price">
						<text>￥</text>{{items.price}}
					</view>
				</view>
			</view>


		</view>

		<view class="order xbgf xmt20">
			<view class="xflex-x order-tex">
				<view class="order-sn">
					订单编号：
				</view>
				<view class="xflex-x">
					<view class="order-info">
						{{info.data.sn}}
					</view>
					<view class="order-copy" @click="copy(info.data.sn)">
						复制
					</view>
				</view>
			</view>
			<view class="xflex-x order-tex">
				<view class="order-sn">
					派单时间：
				</view>
				<view class="xflex-x">
					<view class="order-info">
						{{info.data.blind_open_time}}
					</view>

				</view>
			</view>
			<view class="xflex-x order-tex">
				<view class="order-sn">
					支付时间：
				</view>
				<view class="xflex-x">
					<view class="order-info">
						{{info.data.paytime}}
					</view>

				</view>
			</view>

		</view>


		<view class="order xbgf xmt20">

			<view class="xflex-x-between order-tex">
				<view class="order-sn">
					订单总额
				</view>
				<view class="xflex-x">
					<view class="order-info">
						￥{{info.data.total_amount}}
					</view>
				</view>
			</view>

			<view class="xflex-x-between order-tex">
				<view class="order-sn">
					骊金豆直减
				</view>
				<view class="xflex-x">
					<view class="order-info">
						-￥{{info.data.bean_money}}
					</view>
				</view>
			</view>

			<view class="xflex-x-between order-tex">
				<view class="order-sn">
					优惠券
				</view>
				<view class="xflex-x">
					<view class="order-info">
						-￥{{info.data.coupon_money}}
					</view>
				</view>
			</view>

			<view class="order-total xflex-x">
				<view class="order-Num xflex-x">
					实付款：
					<view class="order-price">
						<text>￥</text>{{info.data.order_amount}}
					</view>
				</view>

			</view>
			
			
			<view class="xbottomblock" style="height: 200rpx;">
				
			</view>
		</view>
		
		
		<view class="xbottom bom xflex-x-between">
				<view class="">
					<view class="xflex-x">
						<image class="bom-icon" src="/pagesA/static/images/shijian.png" mode=""></image>
						<view class="bom-text">
							预计到店时间：
						</view>
					</view>
					<view class="bom-time">
							{{info.data.expect_time.split(' ')[1]}}
					</view>
				</view>
				
				<view class="xflex-x">
					<!-- <view class="bom-qx xmr24">
						取消订单
					</view> -->
					<view class="bom-qr" @click="info.show = true">
						确认入住
					</view>
				</view>
		</view>
		
		<u-popup mode="center" :show="info.show" round="12">
			
			<view class="popup pr">
				<view class="popup-title">
					请输入核销码
				</view>
				<image class="popup-gb pa" @click="info.show = false" src="/pagesA/static/images/guanb.png" mode=""></image>
				<view class="popup-put xflex-x">
					<input type="text" v-model="info.code" placeholder="请输入核销码" />
				</view>
				
				<view class="xflex-x-center popup-btn" @click="info.show = false" >
					<view class="popup-btn1" @click="qx">
						取消核销
					</view>
					<view class="popup-btn2 xml32" @click="hx()">
						核销
					</view>
				</view>
			</view>
			
			
			
		</u-popup>
	</view>
</template>

<script setup>
	import {orderdetail,verify,ordercancel} from '../../../network/home.js'
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
import { reactive } from 'vue';
	
	
	
	let info = reactive({
		id:'',
		data:'',
		show:false,
		code:''
	})
	
	onLoad((option)=>{
		info.id = option.id
		getorderdetail()
	})
	const onPhone = (phone) => {
		uni.makePhoneCall({
			phoneNumber:phone
		})
	}
	
	const getorderdetail = () =>{
		orderdetail({id:info.id}).then(res=>{
			info.data = res.data
		})
	}
	
	const copy = (data) =>{
		uni.setClipboardData({
			data:data,
			success() {
				uni.showToast({
					icon:"none",
					title:'复制成功'
				})
			}
		})
	}
	
	const hx = () =>{
		verify({
			id:info.id,
			code:info.code
		}).then(res=>{
			uni.showToast({
				icon:"none",
				title:"核销成功"
			})
			
			
		})
	}
	
	const qx = () =>{
		ordercancel({id:info.id}).then(res=>{
			uni.showToast({
				icon:"none",
				title:"取消成功"
			})
			
			setTimeout(()=>{
				uni.navigateBack()
			},1000)
		})
	}
	
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.main {
		// padding: 30px;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.info {
		// padding: 30rpx;
		border-radius: 24rpx;

		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;

		&-sj {
			width: 40rpx;
			height: 40rpx;
		}

		&-state {
			font-weight: bold;
			font-size: 44rpx;
			color: #198FFF;
		}

		&-time {
			font-weight: 800;
			font-size: 36rpx;
			color: #222222;
		}

		&-name {

			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		&-type {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			border-right: 1rpx solid #CCCCCC;

			&:last-child {
				border-right: none;
			}
		}
	}

	.order {
		&-user {
			// width: 640rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background: #F8F8F8;
			border-radius: 20rpx;

			&-vip {
				// width: 150rpx;
				// height: 40rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(204, 204, 204, 0.57);
				border-radius: 20rpx;
				padding: 2rpx 2rpx 2rpx 17rpx;
				// float: left;
			}

			&-vipText {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #D2A528;
				line-height: 46rpx;
				padding-right: 17rpx;

			}

			&-vipIcon {
				width: 36rpx;
				height: 36rpx;
			}

			&-customer {
				width: 60rpx;
				height: 60rpx;
			}

			&-customert {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #0CB0FD;
				margin-top: 11rpx;
			}

			&-in {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				margin-top: 28rpx;

				&>text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}

	.hotel {
		border-radius: 20rpx;
		padding: 30rpx 20rpx;

		&-h {
			width: 6rpx;
			height: 32rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			margin-right: 7rpx;
		}

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
		}

		&-img {
			width: 177.6rpx;
			height: 177.6rpx;
			background-color: #eee;
			border-radius: 12rpx;
			margin-right: 20rpx;
		}

		&-box {
			height: 177.6rpx;

		}

		&-span {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #999999;

			// width: 100rpx;
			height: 32rpx;
			background: #EEEEEE;
			padding: 7rpx 14rpx;
			border-radius: 6rpx;
		}

		&-price {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #ED2445;

			&>text {
				font-size: 26rpx;
			}
		}
	}

	.order {
		border-radius: 20rpx;
		padding: 30rpx 20rpx;

		&-sn {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #7C7C7C;
			margin-right: 56rpx;
		}

		&-info {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #272727;
		}

		&-copy {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 22rpx;
			color: #333333;

			width: 70rpx;
			height: 36rpx;
			background: #F2F2F2;
			border-radius: 18rpx;

			margin-left: 12rpx;
			text-align: center;
			line-height: 36rpx;
		}

		&-tex {
			margin-bottom: 44rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&-total {
			justify-content: flex-end;
		}

		&-Num {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #272727;
		}

		&-price {
			font-size:36rpx;
			color: #F0250F;
			&>text {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #F0250F;
			}
		}
	}
	
	.popup {
		width: 600rpx;
		// height: 420rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		
		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
			margin-top: 40rpx;
		}
		&-gb {
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			right: 30rpx;
		}
		
		&-put {
			width: 420rpx;
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: auto;
			margin-top: 85rpx;
			padding: 0 40rpx;
			
		}
		
		&-btn {
			margin-top: 61rpx;
		}
		&-btn1 {
			width: 214rpx;
			height: 72rpx;
			border-radius: 36rpx;
			border: 1px solid #999999;
			
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			text-align: center;
			line-height: 72rpx;
		}
		
		&-btn2 {
			width: 214rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 36rpx;
			
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
		}
	}
	
	.bom {
		
		&-icon{
			width: 21rpx;
			height: 21rpx;
		}
		
		&-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #666666;
		}
		
		&-time {
			font-weight: bold;
			font-size: 32rpx;
			color: #198FFF;
		}
		
		&-qx {
			width: 214rpx;
			height: 72rpx;
			border-radius: 36rpx;
			border: 1px solid #CCCCCC;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #666666;
			text-align: center;
			line-height: 72rpx;
		}
		&-qr {
			width: 214rpx;
			height: 72rpx;
			border-radius: 36rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
		}
		
	}
</style>